<template>
  <view>
    <nav-bar title="项目预约"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }" class="contain">
      <view class="time-box">
        <scroll-view :scroll-x="true" class="date-box">
          <view class="date-list">
            <view v-for="(item, index) in same_week"
              :class="['date-item', activeIndex === index ? 'active' : 'no-active']" @click="dateSelect(item, index)"
              :key='index'>
              <view class="day">{{ item.name.split('/')[1] }}</view>
              <view class="week">{{ item.week }}</view>
            </view>
          </view>
        </scroll-view>
        <view v-if="isLoading" class="common-loading">
          <image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
        </view>
        <view class="time-data" v-else-if="timeDesData && timeDesData.length">
          <view
            class="time-des" 
            v-for="(item, index) in timeDesData"
            :key="index"
            @click="timeSelectClick(item, index)"
            :style="activeTimeIndex === index ?
              'color:#c27e15;font-weight:bold' :
              index < firstTimeIndex || activeTimeIndex === -1 ? 'color:#aaa' :
              'color:#666'"
          >{{ item }}</view>
        </view>
        <view v-else class="common-no-data">
          <image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
          <view class="text">该门店今日无可预约时间</view>
        </view>
      </view>
    </scroll-view>
    <view class="btn_edit">
      <view class="btn_cont" v-if="anotherReserve" @click="clickAnother">再次预约</view>
      <view class="btn_cont" v-else @click="toNext">下一步</view>
    </view>
  </view>
</template>

<script>
  import NavBar from "../../components/nav-bar";
  import Search from '../../components/search/index'
  import shopList from "@/subPages/components/shopList"
  import api_home from '@/api/home'
  import pageConfig from '@/config'
  export default { 
    name: "ReserveProject",
    components: { NavBar, Search, shopList },
    data() {
      const date = new Date()
      const years = []
      const year = date.getFullYear()
      const months = []
      const month = date.getMonth() + 1
      const days = []
      const day = date.getDate()
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      return {
        baseImgUrl: pageConfig.baseImgUrl,
        baseIconUrl: pageConfig.baseIconUrl,
        mainHeight: '',
        actionHeight: '',
        activeIndex: 0,
        activeTimeIndex: 0,
        firstTimeIndex: 0,
        reserveDate: '',
        reserveTime: '',
        years,
        year,
        months,
        month,
        days,
        day,
        visible: true,
        show: false,
        week: [],
        same_week: [], // 保存当前最新的时间
        same_day: '', // 当天的时间
        timeDesData: [],
        isLoading: false,
        transferData: {},
        anotherReserve: false
      }
    },
    created() {
      this.mainHeight = this.$store.getters.heightData.noTabMainHeight
      this.actionHeight = this.$store.getters.heightData.mainSearchHeight.split("px")[0] - 250 + "px"
      let data = []
      this.start = this.getDay(+7)
      this.end = this.getDay()
      for (let i = 6; i >= 0; i--) {
        data.push(this.getDay(+i))
      }
      var date = data.reverse() // 得出一周的日期进行排序
      this.week = date
      var date = this.week
      var pkc = [];/* 用于存储展示的日期数据 */
      var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
      date.forEach((item, index) => { // 循坏日期
        var f = new Date(item)
        var week = f.getDay() // 计算出星期几
        var str1 = item.split('/')
        var strs = str1[1] + '/' + str1[2]
        var weeks = weekday[week] /* 将计算出来的时间带入数字得出中文 */
        var time = Math.round(new Date(item) / 1000) // 时间戳转换
        var s = {}//用于存储每个日期对象
        s.date = item
        s.name = strs
        s.week = weeks
        s.times = time
        pkc.push(s)
      })
      this.same_week = pkc
      this.reserveDate = pkc[0].date
      // pkc存储着今天的年月日星期几，时间戳等
      this.same_day = pkc[0].date // 今天的数据
    },
    onLoad(options) {
      this.anotherReserve = options.anotherReserve === 'sure' || false
      // 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
      if (options.transferData) {
        this.transferData = JSON.parse(decodeURIComponent(options.transferData))
        this.getTime()
      }
    },
    methods: {
      getTime() {
        this.isLoading = true
        const params = {
          closingTime: this.transferData.closingTime,
          openingTime: this.transferData.openingTime
        }
        api_home.fetchReserveTime(params).then((res) => {
          this.isLoading = false
          this.timeDesData = res.data
          this.getReserveTime(true)
        }).catch(err => {
          this.isLoading = false
        })
      },
      getReserveTime(isTody) {
        const now = new Date()
        const hour = now.getHours()
        const minute = now.getMinutes()
        const greaterMinute = []
        const greaterHour = []
        if (!isTody) {
          this.activeTimeIndex = 0
          this.firstTimeIndex = 0
          this.reserveTime = this.timeDesData[0]
          return
        }
        this.timeDesData.forEach((item, index) => {
          const itemHour = Number(item.split(':')[0])
          const itemMinute = Number(item.split(':')[1])
          if (itemHour === hour) {
            if (itemMinute >= minute) {
              greaterMinute.push({ timeData: item, index })
            }
          }
          if (itemHour >= hour) {
            greaterHour.push(item)
          }
          if (greaterHour.length === 0) {
            this.activeTimeIndex = -1
            return
          }
          if (greaterMinute.length) {
            this.reserveTime = greaterMinute[0].timeData
            this.activeTimeIndex =  greaterMinute[0].index
            this.firstTimeIndex = greaterMinute[0].index
          } else {
            if (itemHour === (hour + 1) && itemMinute === 0) {
              this.reserveTime = item
              this.activeTimeIndex = index
              this.firstTimeIndex = index
            }
          }
        })
      },
      bindChange: function (e) {
        const val = e.detail.value
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
      },
      getDay(day) {
        var today = new Date()
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
        today.setTime(targetday_milliseconds) //注意，这行是关键代码
        var tYear = today.getFullYear()
        var tMonth = today.getMonth()
        var tDate = today.getDate()
        tMonth = this.doHandleMonth(tMonth + 1)
        tDate = this.doHandleMonth(tDate)
        return `${tYear}/${tMonth > 9 ? tMonth : '0' + tMonth}/${tDate > 9 ? tDate : '0' + tDate}`
      },
      doHandleMonth(month) {
        var m = month
        if (month.toString().length == 1) {
          m = month
        }
        return m
      },
      dateSelect(item, index) {
        const now = new Date()
        const year = now.getFullYear()
        const month = now.getMonth() + 1
        const day = now.getDate()
        const nowDate = `${year}/${month > 9 ? month : '0' + month}/${day > 9 ? day : '0' + day}`
        this.activeIndex = index
        this.reserveDate = item.date
        if (nowDate === item.date) {
          this.getReserveTime(true)
        } else {
          this.getReserveTime(false)
        }
      },
      close() {
        this.show = false
      },
      timeSelectClick(item, index) {
        if (index < this.firstTimeIndex || this.activeTimeIndex === -1) return
        this.activeTimeIndex = index
        this.reserveTime = item
      },
      toNext() {
        if (!this.reserveTime) {
          uni.showToast({
            title: '请选择预约时间',
            icon: 'none'
          })
          return
        }
        const transferData = {
          ...this.transferData,
          reserveDate: this.reserveDate,
          reserveTime: this.reserveTime
        }
        const params = encodeURIComponent(JSON.stringify(transferData))
        uni.navigateTo({
          url: `/subPages/home/chooseProject?transferData=${params}`
        })
      },
      clickAnother() {
        const transferData = {
          ...this.transferData,
          reserveDate: this.reserveDate,
          reserveTime: this.reserveTime
        }
        const params = encodeURIComponent(JSON.stringify(transferData))
        uni.navigateTo({
          url: `/subPages/home/chooseProject?transferData=${params}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .quantum {
    display: flex;
    padding: 20rpx 30rpx;
    justify-content: space-between;

    .item {
      width: 4%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .time {
        width: 90%;
        height: 6rpx;
        opacity: 1;
        background: rgba(229, 229, 229, 1);
      }

      .number {
        font-size: 18rpx;
        font-weight: 500;
        color: rgba(166, 166, 166, 1);
        margin-top: -30rpx;
      }
    }
  }

  .preview-time {
    display: flex;
    padding-left: 40rpx;
    margin-top: -40rpx;
    padding-bottom: 40rpx;

    .shape {
      width: 20rpx;
      height: 6rpx;
      opacity: 1;
      transform: translateY(15rpx);
      margin-right: 5rpx;
    }

    .text {
      font-size: 24rpx;
      font-weight: 500;
      color: rgba(128, 128, 128, 1);
      margin-right: 40rpx;
    }
  }

  .popup-title {
    padding: 30rpx 35rpx 40rpx;
    display: flex;
    justify-content: space-between;

    .close {
      font-size: 24rpx;
      font-weight: 500;
      color: rgba(128, 128, 128, 1);
      margin-top: 7rpx;
    }

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }

    .submit {
      font-size: 24rpx;
      font-weight: 500;
      color: rgba(194, 126, 21, 1);
      margin-top: 7rpx;
    }
  }

  .popup-box {
    padding: 0 35rpx;

    .popup-list {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 33.3%;
        height: 140rpx;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 25rpx;

        .list {
          width: 90%;
          height: 100%;
          border-radius: 10px;

          .time {
            font-size: 32rpx;
            font-weight: 500;
            height: 45rpx;
          }

          .word {
            font-size: 20rpx;
            font-weight: 500;
            height: 28rpx;
          }
        }

        .active-time {
          background: rgba(194, 126, 21, 1);
        }

        .no-active-time {
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(166, 166, 166, 1);
        }
      }
    }
  }

  .contain {
    padding: 32rpx 40rpx 100rpx 37rpx;
  }

  .top-box {
    width: 100%;
    background: #FFFFFF;
    border-radius: 17rpx;
    opacity: 1;
    padding: 20rpx 60rpx 20rpx 47rpx;
    display: flex;
    margin-bottom: 24rpx;

    img {
      width: 130rpx;
      height: 130rpx;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
    }

    .top-text {
      margin-left: 20rpx;

      .title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 13rpx;
      }

      .text {
        font-size: 22rpx;
        font-weight: 400;
        color: #666666;
        margin-bottom: 13rpx;
      }
    }

  }

  .time-box {
    width: 100%;
    background: #FFFFFF;
    border-radius: 17rpx;
    opacity: 1;
    padding-top: 20rpx;

    .date-box {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      white-space: nowrap;
      padding-left: 30rpx;
      border-bottom: 8rpx solid #f6f6f6;
      padding-bottom: 20rpx;

      .date-item {
        width: 100rpx;
        height: 100rpx;
        border-radius: 17rpx;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 10rpx;

        .day {
          font-size: 30rpx;
        }

        .week {
          font-size: 20rpx;
        }
      }

      .active {
        background: rgba(194, 126, 21, 1);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        color: rgba(255, 255, 255, 1);
      }

      .no-active {
        color: rgba(56, 56, 56, 1);
        background-color: #fff;
      }
    }

    .choose-time {
      padding: 0 40rpx;
      display: flex;
      justify-content: space-between;
      font-size: 32rpx;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 44.8px;
      color: rgba(56, 56, 56, 1);

      .begin-time {
        width: 170rpx;
        height: 50rpx;
        opacity: 1;
        background: rgba(243, 243, 243, 1);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 50rpx;
        color: rgba(194, 126, 21, 1);
        text-align: center;
        margin-top: 15rpx;
      }

      .end-time {
        width: 160rpx;
        height: 50rpx;
        opacity: 1;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 50rpx;
        color: rgba(128, 128, 128, 1);
        text-align: center;
        margin-top: 15rpx;
      }
    }

    .time-data {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10rpx;

      .time-des {
        width: 16.6%;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        font-weight: 500;
        // letter-spacing: 0px;
        // line-height: 33.6px;
        // color: rgba(128, 128, 128, 1);
      }
    }
  }

  .picker-view {
    height: 500rpx;
    margin-left: 44rpx;
  }

  .item {
    line-height: 100rpx;
    text-align: center;
  }

  .preview {
    opacity: 1;
    border-radius: 17rpx;
    background: rgba(255, 255, 255, 1);
    padding: 26rpx 0 34rpx 39rpx;
    margin-bottom: 24rpx;

    .title {
      position: relative;
      width: 100%;
      margin-left: -39rpx;
      margin-bottom: 20rpx;

      .box-line {
        position: absolute;
        left: 0;
        top: 0;
        width: 15rpx;
        height: 48rpx;
        opacity: 1;
        background: rgba(194, 126, 21, 1);

      }

      .text {
        margin-left: 44rpx;
        font-size: 38rpx;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        color: rgba(0, 0, 0, 1);

        .text-choose {
          font-size: 26rpx;
          font-weight: 400;
          line-height: 50rpx;
          color: rgba(194, 126, 21, 1);
        }
      }

      .time-list {
        width: 90%;
        opacity: 1;
        padding: 15rpx;
        background: rgba(204, 204, 204, 0);
        margin-left: 50rpx;
        margin-top: 40rpx;
        border: 1rpx solid rgba(229, 229, 229, 1);
        font-size: 30rpx;
        font-weight: 500;
        letter-spacing: 5rpx;
        color: rgba(128, 128, 128, 1);
        text-align: center;
      }
    }

    .container {
      margin-right: 39rpx;

      .inform {
        font-size: 24rpx;
        font-weight: 400;
        color: #FE2C2C;
        margin-bottom: 24rpx;
      }

      .date {
        display: flex;
        line-height: 50rpx;

        .left-date {
          width: 20%;
          line-height: 50rpx;

          .date {
            line-height: 50rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #000000;
          }
        }

        .right-date {
          width: 80%;
          line-height: 50rpx;

          .time {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            // margin-top: 17rpx;
            line-height: 50rpx;

            .time-item {
              width: 33.3%;
              font-size: 26rpx;
              font-weight: 400;
              line-height: 50rpx;
              color: #666666;
            }
          }
        }
      }
    }
  }
</style>